@import 'styles/variables'

$color-bg-place-default: $grey-light-1
$color-bg-place-unavailable: $grey-light-4
$color-bg-empty-row: $grey-light-3
$color-border-place-selected: $orange-1
$color-border-railcar: $grey-3

$width-border-railcar: 4px

.places__selection-map
  height: 125px
  display: flex
  padding-inline: 20px
  margin-top: 30px

.places__railcar-side
  height: 100%
  position: relative

  &_number
    width: 33px
    height: 24px
    background: #333333
    color: $white
    display: flex
    justify-content: center
    align-items: center
    position: absolute
    top: -20px
    left: 40px
    font-size: 14px
    font-weight: 700

  &_img
    height: 100%

.place__list_container
  width: 100%
  margin-block: 4px
  display: flex
  flex-direction: column

  &_first-class, &_second-class, &_third-class
    gap: 22px

  &_fourth-class
    position: relative

    &::before, &::after
      content: ''
      position: absolute
      background: white
      width: $width-border-railcar

    &::before
      bottom: 4px
      top: 66px
      left: 0px

    &::after
      bottom: 17px
      top: 66px
      right: 0px

.place__list
  position: relative
  display: flex

  &_fourth-class
    flex-direction: column
    padding-block: 4px

    &_right-side, &_left-side
      display: flex
      justify-content: space-around
      border: $width-border-railcar solid $color-border-railcar
      flex: 1

    &_right-side
      border-bottom: none
      padding-top: 4px
      align-items: flex-start

    &_left-side
      border-top: none
      padding-bottom: 4px
      align-items: flex-end

  &_right-side
    border: $width-border-railcar solid $color-border-railcar
    border-bottom: none
    height: 100%

  &_left-side
    border: $width-border-railcar solid $color-border-railcar
    border-top: none
    min-height: 28px

.place__placement
  display: flex
  justify-content: space-between
  flex: 1

  &:not(:last-child)
    border-right: $width-border-railcar solid $color-border-railcar

  &_second-class
    position: relative
    display: flex
    justify-content: space-between
    padding-bottom: 43px
    flex: 1

.place__row
  display: flex
  flex-direction: column-reverse

  &_first-class, &_second-class, &_third-class
    border-bottom: $width-border-railcar solid $color-border-railcar

  &_fourth-class
    gap: 3px

  &_left-train-side
    flex: 1 1
    display: flex

    &:not(:last-child)
      border-right: $width-border-railcar solid $color-border-railcar

  &_empty
    position: relative

    &::after
      content: ''
      position: absolute
      height: 1px
      left: 0
      right: 0
      background: $color-bg-empty-row
      bottom: 15px

.place__item
  display: flex
  justify-content: center
  align-items: center

  border: 2px solid transparent
  background: $color-bg-place-default

  font-size: 12px
  font-weight: 700
  line-height: 1

  cursor: pointer
  user-select: none

  &_container
    display: flex
    justify-content: center
    flex: 1 1

  &_first-class, &_second-class, &_third-class
    flex: 1
    width: 26px

  &_first-class
    padding-bottom: 8px
    align-items: flex-end

  &_fourth-class
    width: 26px
    height: 18px

  &_left-train-side
    flex: 1

  &.selected
    border-color: $color-border-place-selected

  &:disabled
    background: $color-bg-place-unavailable
    color: white
    cursor: auto

.place__item_popup
  position: absolute
  display: block
  // display: none
  border: 2px solid #a1a1a1
  padding: 5px
  background: white
  margin-top: 29px
  z-index: 1

  &::before, &::after
    content: ''
    position: absolute
    left: calc(50% - 5px)
    // border-bottom: 5px solid #a1a1a1
    border-inline: 5px solid transparent

  &::before
    bottom: calc(100% - -2px)
    border-bottom: 5px solid #a1a1a1
    // border-inline: 5px solid transparent

  &::after
    bottom: 100%
    border-bottom: 5px solid #fff
    // border-inline: 5px solid transparent

  &_button
    display: block
    color: #FFA800
    font-size: 1.125rem

    &:not(:last-child)
      margin-bottom: 5px

    &:hover
      text-decoration: underline
